<template>
  <div class="recommend-wrapper">
    <div class="recommend-header">
      <svg-icon size="24" icon-class="recommend"></svg-icon>
      <div>商品推荐</div>
    </div>
    <div v-if="data.length>0">
      <div class="recommend-item" v-for="(item,index) in data" :key="index">
        <div class="recommend-top">
          <div class="recommend-left">
            <div class="recommend-img-wrapper">
              <img :src="item.thumbnail" alt=""/>
              <svg-icon width="24" class="icon" :icon-class="'top'+(index+1)"/>
            </div>
          </div>
          <div class="recommend-right">
            <div class="more-t" @click="toDetail(item.goodsId)">{{ item.goodsName }}</div>
            <div>{{ item.goodsDesc }}</div>
          </div>
        </div>
        <div class="recommend-bottom">
          <div class="itemprice" :class="{itemflex: item.chargeType == 3}" v-if="item.activityDesc">
            <span style="line-height: 20px;">{{ item.activityDesc  }}</span>
            <div class="through">
              {{ item.chargeType == 3 ? '面议' : ('¥' + (item.chargeType == 1 ? item.price : 0)) }}
              {{ (item.chargeType === 1 ? item.unit : '') }}
            </div>
          </div>
          <div class="recommend-price" v-else>
            <div v-if="item.chargeType!==3">¥{{ item.chargeType === 1 ? item.price : 0 }}</div>
            <div v-else>面议</div>
            <span>{{ item.chargeType === 1 ? item.unit : '' }}</span>
          </div>
          <div class="recommend-focus" @click="changeFocus(item,index)">
            <svg-icon :icon-class="item.isCollect?'focused':'focus'"></svg-icon>
            <div>{{ item.isCollect ? '取消关注' : '关注' }}</div>
          </div>
        </div>
      </div>
    </div>
    <a-empty v-else style="margin:8px;"></a-empty>
  </div>
</template>

<script>
export default {
  name: 'Recommend',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    changeFocus (item, index) {
      this.$emit('change', item, index)
    },
    toDetail (id) {
      this.$emit('detail', id)
    }
  }
}
</script>

<style scoped lang="scss">
$mainColor: #0078FE;
.recommend-wrapper {
  margin-top: 20px;
  background: #FFFFFF;
  border-radius: 10px;
  padding-top: 20px;
  border: 1px solid #E2E2E2;

  .recommend-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #E2E2E2;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC, sans-serif;
    font-weight: 500;
    color: #323232;
    line-height: 16px;

    div {
      margin-left: 10px;
    }
  }

  .recommend-item {
    border-bottom: 1px dotted #E2E2E2;
    padding: 20px;

    &:last-child {
      border-bottom: none;
    }

    .recommend-top {
      height: 70px;
      display: flex;

      .recommend-img-wrapper {
        position: relative;
        width: 70px;

        img {
          width: 70px;
          height: 70px;
        }

        .icon {
          position: absolute;
          top: -10px;
          left: -10px;
        }
      }

      .recommend-right {
        flex: 1;
        width: 0;
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        div:first-child {
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC, sans-serif;
          font-weight: 500;
          color: #323232;
          line-height: 20px;
          cursor: pointer;

          &:hover {
            color: $mainColor;
          }
        }

        div:last-child {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          font-weight: 400;
          color: #909090;
          line-height: 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .recommend-bottom {
      margin-top: 7px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .through{
        text-decoration: line-through;
        color: #999;
        font-size: 12px;
        margin-left: 4px;

      }
      .itemflex{
        white-space:nowrap;
        display: flex;
        align-items: self-end;
      }
      .itemprice{
        font-size: 20px;
        color: #E03437;
        font-weight: 500;
        
        .unit{
          font-size: 12px;
          font-weight: 400;
          color: #909090;
          margin-left: 6px;
        }
      }
      .recommend-price {
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC, sans-serif;
        font-weight: 500;
        color: #E03437;
        line-height: 20px;
        display: flex;
        align-items: flex-end;

        div {
          margin-bottom: -2px;
        }

        span {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          font-weight: 400;
          margin-left: 6px;
          color: #909090;
          line-height: 12px;
        }
      }

      .recommend-focus {
        display: flex;
        align-items: center;
        cursor: pointer;

        div {
          margin-left: 8px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          font-weight: 400;
          color: #323232;
          line-height: 14px;

          &:hover {
            color: $mainColor;
          }
        }
      }
    }
  }
}
</style>
